import React, {Component} from 'react';
import {withRouter} from 'react-router'
import {observer, inject} from 'mobx-react';
import {Menu, Icon} from 'antd';

@withRouter
@inject('menu')
@observer
export default class extends Component{
  constructor(props) {
    super(props);
    this.rootSubmenuKeys = [];
    this.state = {
      openKeys: [],
      selectedKeys: []
    };
  }

  async componentWillMount() {
    await this.props.menu.getList();
    // 第一次获取数据是要进行菜单状态处理，防止处理事件响应完毕，菜单数据还没加载
    this.componentWillReceiveProps();
    this.props.menu.list.map(item => {
      this.rootSubmenuKeys.push(item.id);
    });
  }

  componentDidMount() {
  }

  // 当路由变化时，即组件的props发生了变化，会调用componentWillReceiveProps等生命周期钩子
  componentWillReceiveProps() {
    // 针对菜单收缩无法隐藏的特殊处理
    if(!this.props.collapsed) {
      setTimeout(() => {
        let amsp = document.querySelector('.ant-menu-submenu-popup');
        if(amsp) {
          // amsp.style.display = 'none';
          amsp.setAttribute('class', amsp.getAttribute('class') + ' ant-menu-submenu-hidden');
          let amsub = amsp.firstElementChild;
          amsub.setAttribute('class', amsub.getAttribute('class') + ' ant-menu-hidden');
        }
      }, 20);
    }
    let {openKey, selectKey} = this.getCurrentRouteKey();
    this.setState({
      openKeys: [openKey],
      selectedKeys: [selectKey]
    });
  }

  getCurrentRouteKey() {
    // 根据当前路由判断应该展开那些菜单
    let locationKey = this.props.history.location.pathname;
    let openKey = '';
    let selectKey = locationKey;
    for(let i = 0; i < this.props.menu.list.length; i++) {
      let item = this.props.menu.list[i];
      if(item.type === 'sub') {
        for(let j = 0; j < item.child.length; j++){
          if(item.child[j].id === locationKey) {
            openKey = item.id;
            break;
          }
        }
      }
      if(openKey || item.id === locationKey) break;
    }
    openKey = openKey || locationKey;
    return {openKey, selectKey};
  }

  onOpenChange = (openKeys) => {
    const latestOpenKey = openKeys.find(key => this.state.openKeys.indexOf(key) === -1);
    if (this.rootSubmenuKeys.indexOf(latestOpenKey) === -1) {
      this.setState({ openKeys });
    } else {
      this.setState({
        openKeys: latestOpenKey ? [latestOpenKey] : [],
      });
    }
  }

  onSelect = (selectMenu) => {
    this.setState({selectedKeys: [selectMenu.key]});
    this.props.history.push(selectMenu.key);
  }

  render() {
    if(this.props.menu.list.length === 0) return null;
    return <Menu mode="inline"
      style={{height: '100%', width: '200px'}}
      className="menu"
      theme="dark"
      onSelect={this.onSelect}
      onOpenChange={this.onOpenChange}
      openKeys={this.state.openKeys}
      selectedKeys={this.state.selectedKeys}
      // defaultOpenKeys={this.state.openKeys}
      // defaultSelectedKeys={this.state.selectedKeys}
      >
      {this.props.menu.list.map((menu) => {
        {if(menu.type === 'sub') {
        return <Menu.SubMenu
          key={'' + menu.id}
          title={
            <span>
              <Icon type={menu.icon} />
              <span>{menu.name}</span>
            </span>}>
          {menu.child.map((sub) => {
            return <Menu.Item key={sub.id} url={sub.type}>
              <span>{sub.name}</span>
            </Menu.Item>
          })}
        </Menu.SubMenu>
        }
        else if (menu.type === 'item') {
          return <Menu.Item key={menu.id} url={menu.type}>
            <Icon type={menu.icon} />
            <span>{menu.name}</span>
          </Menu.Item>
        }
        }
      })}
    </Menu>
  }
}